<template>
  <!--生成的列表的 meta-->
  <nf-find
    :findValue="findValue"
    :findArray="findArray"
    v-bind="findMeta2"
  >
  </nf-find>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-input
        v-model="json2"
        type="textarea"
        :autosize="{ minRows: 20, maxRows: 20 }"
        placeholder=""
      ></el-input>
    </el-col>
    <el-col :span="8">
      简洁模式：
      <div
        v-for="(item, key, index) in findValue"
        :key="index"
      >
        {{key}}： {{item}}
      </div>
    </el-col>
    <el-col :span="7">
      标准模式：
      <div
        v-for="(item, key, index) in findArray"
        :key="index"
      >
        {{key}}： {{item}}
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts">
  import { defineComponent, reactive, computed, watch } from 'vue'
  import { toMetaFind } from '../../../../lib-excel/main'

  import meta from './json/find.json'

  /**
   * 字段 meta
   */
  export default defineComponent({
    name: 'nf-xls-meta-col',
    props: {
    },
    setup(props, context) {

      const findMeta2 = reactive(meta)

      const findValue = reactive({})
      const findArray = reactive([])
      // 获取表单和字段的meta
      const {
        findMeta,
        colMeta
      } = toMetaFind()

      const json2 = computed(() => JSON.stringify(findMeta, null, 2))

      return {
        findValue,
        findArray,
        findMeta,
        findMeta2,
        colMeta,
        json2
      }
    }
  })
</script>